<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            background-color: rgb(247, 210, 210);
        }

        .bold {
            font-weight: bolder;
        }

        .ok {
            color: green;
        }

        .ita {
            font-style: italic;
        }

        ul {
            list-style: none;
        }

        .menu-item {
            width: 100px;
            height: 50px;
            float: left;
            background-color: rgb(233, 252, 224);
            text-align: center;
            border: 1px solid rgb(172, 170, 170);
            line-height: 50px;
        }

        .active {
            background-color: rgb(171, 247, 148);
        }

        .text-color {
            color: red;
        }

        .box-border {
            border: 2px blue dashed
        }

        .font {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>对象语法</h2>
        <button :class="{active:isActive,bold:isBold}">选项一</button>
        <h2>数组语法</h2>
        <div :class="[successClass,'active',{bold:isBold}]" class="ita">
            数组语法实例
        </div>
        <hr>
        <ul>
            <li class="menu-item" :class="{active:activeId == 1}" data-id="1" @click="hover">首页</li>
            <li class="menu-item" :class="{active:activeId == 2}" data-id="2" @click="hover">关于我们</li>
            <li class="menu-item" :class="{active:activeId == 3}" data-id="3" @click="hover">联系我们</li>
        </ul>
        <hr>

        <hr>

        <div style="color:red">
            style样式
        </div>
        <div :style="{color:'green','background-color':bc,borderTop:'1px solid red'}">
            style样式
        </div>
        <div :style="[s1,s2]">
            数组
        </div>
        <hr>
        <!-- 有一个div,请通过如下方式给他设置三个类：
        类1样式： 【字体颜色：red;】
        类2样式： 【盒子边框：2px blue dashed】
        类3样式： 【字体大小: 20px】
        1.通过v-bind:class设置文本值实现
        2.通过v-bind:class设置对象实现
        3.通过v-bind:class设置数组实现 
        4.通过v-bind:style设置对象实现
        5.通过v-bind:style设置数组实现
    -->
        <div :class="'text-color box-border font'">
            1.通过v-bind:class设置文本值实现
        </div>
        <div :class="{'text-color':true,'box-border':true,'font':true}">
            2.通过v-bind:class设置对象实现
        </div>
        <div :class="['text-color','box-border','font']">
            3.通过v-bind:class设置数组实现
        </div>
        <div :style="{color:color,fontSize:fontSize,border:border}">
            4.通过v-bind:style设置对象实现
        </div>
        <div :style="[{color:'red'},{fontSize:'20px'},{border:border}]">
            5.通过v-bind:style设置数组实现
        </div>

    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                successClass: 'ok',
                isBold: true,
                isActive: true,
                activeId: 1,
                bc: 'yellow',
                s1: { color: "white" },
                s2: { backgroundColor: "gray" },
                color: "red",
                border: "2px blue dashed",
                fontSize: "20px"


            },
            methods: {
                hover(e) {
                    let id = e.target.dataset.id
                    this.activeId = id
                }
            }
        })
    </script>
</body>

</html>